import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import { Home, Switch, Menu } from './src/asset/icons';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

const HomeScreen = () => (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Home Screen</Text>
    </View>
);

const ProfileScreen = () => (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Profile Screen</Text>
    </View>
);

const RootDrawer = DrawerNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            drawerLabel: '主页',
            drawerIcon: ({tintColor, focused}) => <Home fill={tintColor} width="20" height="20"/>
        }
    },
    Profile: {
        screen: ProfileScreen,
        navigationOptions: {
            drawerLabel: '退出',
            drawerIcon: ({tintColor, focused}) => <Switch fill={tintColor} width="20" height="20"/>
        }
    }
});

export default class App extends Component<{}> {
    constructor (props) {
        super(props);
        this.state = {};
    }

    render () {
        return (
            <RootDrawer/>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    header: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    desc: {
        height: 60,
        color: '#999'
    },
});
